<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <img :src="imageUrl" alt="Converted Image">
    <button @click="convertToJPG">Convert to JPG</button>
    <button @click="convertToPNG">Convert to PNG</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const file = ref(null);
const imageUrl = ref('');

const handleFileChange = (e) => {
  file.value = e.target.files[0];
  imageUrl.value = URL.createObjectURL(file.value);
};

const convertToJPG = () => {
  // Convert image to JPG format
  // Implementation for converting to JPG format
};

const convertToPNG = () => {
  // Convert image to PNG format
  // Implementation for converting to PNG format
};
</script>